<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div {
        width: 100px;
        height: 100px;
        background-color: skyblue;
    }
</style>
<body>


<div>1</div>
<div>2</div>
<div>3</div>

<script>

    var divs = document.querySelectorAll('div');
    divs[0].onclick = function () {
        alert(11);
        // 1.传统方式删除事件
        divs[0].onclick = null;
    }

    divs[1].addEventListener('click', func)     // 里面的func 不需要调用加小括号

    // removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLDivElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
    // removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;

    // 2.removeEventListener 删除事件
    function func() {
        alert(22)
        divs[1].removeEventListener('click', func);
    }

    // 3.detachEvent 删除事件
    divs[2].attachEvent('onclick', func02);

    function func02() {
        alert(33);
        divs[2].detachEvent("onclick", func02);
    }
</script>
</body>
</html>
